<!--
 * @Description: OSPF首页
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-10-16 14:49:51
 * @LastEditTime: 2021-11-04 16:58:35
 * @LastEditors: 0001101008/HuYuxi
-->
<template>
  <div class="ospf-main-box">
    <el-container>
      <el-aside width="98px">
        <el-menu
          default-active="case"
          default-openeds="['case']"
          @select="selectMenu"
          @open="openMenu"
          active-text-color="#3296fa"
          text-color="#333"
        >
          <el-submenu index="case">
            <template slot="title">OSPF</template>
            <el-menu-item-group>
              <el-menu-item index="case">- 实例</el-menu-item>
              <el-menu-item index="area">- 区域</el-menu-item>
              <el-menu-item index="inter">- 接口</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="state">
            <span slot="title">状态</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main>
          <template v-if="radio === 'case'">
            <ospfCase :ne="ne"></ospfCase>
          </template>
          <template v-if="radio === 'area'">
            <ospfArea :ne="ne"></ospfArea>
          </template>
          <template v-if="radio === 'inter'">
            <inter :ne="ne"></inter>
          </template>
          <template v-if="radio === 'state'">
            <state :ne="ne"></state>
          </template>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import ospfCase from './case/index.vue';
import ospfArea from './area/index.vue';
import inter from './interf/index.vue';
import state from './state/index.vue';
export default {
  props: ['ne'],
  components: { ospfCase, ospfArea, inter, state },
  data () {
    return {
      radio: 'case',
    };
  },
  methods: {
    selectMenu (key) {
      let _this = this;
      _this.radio = key;
    },
  }
};
</script>

<style lang="scss" scoped>
.radio-tab {
  margin-bottom: 15px;
}
.ospf-main-box {
  ::v-deep .el-aside {
    background: #fff;
    border-right: 1px solid #ebeef5;
  }
  ::v-deep .el-submenu__icon-arrow {
    display: none;
  }
  ::v-deep .el-menu {
    border: none;
  }
}
</style>